<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="slow-in">
			<div class="box eg1">缓慢进入</div>
		</div>
		<hr />
		<div class="shutters">
			<div class="eg2"></div>
			<div class="eg2"></div>
			<div class="eg2"></div>
			<div class="eg2"></div>
			<div class="eg2"></div>
			<div class="box ">百叶窗</div>
		</div>
		<hr />
		<div class="erase">
			<div class="box eg3">擦除</div>
		</div>
		<hr />
		<div class="boxed">
			<div class="box eg4">盒状</div>
			<div class="box"></div>
		</div>
		<hr />
		<div class="diamond">
			<div class="box eg5">菱形</div>
			<div class="diamond1"></div>
			<div class="diamond2"></div>
		</div>
		<hr />

		<div class="wheel-container">
			<div class="wheel-left">
				<div class="wheel-left-item"></div>
			</div>
			<div class="wheel-right">
				<div class="wheel-right-item"></div>
			</div>
		</div>
	</body>

	<style>
		body {
			background-color: darkgray;
		}

		.box {
			width: 200px;
			height: 100px;
			line-height: 100px;
			color: white;
			font-size: large;
			font-weight: 600;
			letter-spacing: 5px;
			text-align: center;
			background-color: palevioletred;
		}

		.eg1 {
			margin-left: 250px;
			animation: animation1 2s linear;
		}

		@keyframes animation1 {
			from {
				transform: translateY(400px);
			}

			to {
				/* 如果终态位置和无动画时不同，则动画完成后会回到无动画时的默认状态；
			如果终态位置和无动画时相同，则动画完成后会保持最终状态，即和无动画时状态相同  */
				transform: translateY(0px);
			}
		}

		.shutters {
			position: relative;
			display: inline-block;
			padding: 10px;
			border: 1px solid #000000;
		}

		.eg2 {
			width: 200px;
			position: absolute;
			background-color: white;
			/* animation: animation2 2s linear; */
		}
		.shutters:hover .eg2 {
			animation: animation2 2s linear;
		}

		.shutters div:nth-child(1) {
			bottom: 80px;
		}

		.shutters div:nth-child(2) {
			bottom: 60px;
		}

		.shutters div:nth-child(3) {
			bottom: 40px;
		}

		.shutters div:nth-child(4) {
			bottom: 20px;
		}

		.shutters div:nth-child(5) {
			bottom: 0px;
		}

		@keyframes animation2 {
			from {
				height: 20px;
			}

			to {
				height: 0px;
			}
		}

		.erase {
			position: relative;
			width: 200px;
			height: 100px;
			display: inline-block;
			border: 1px solid #000000;
			animation-fill-mode: forwards;
		}

		.erase:hover .eg3{
			animation: animation3 2s linear;
		}
		.eg3 {
			height: 100px;
			position: absolute;
			top: 0px;
			left: 0px;
		}

		@keyframes animation3 {
			from {
				top: 100%;
			}

			to {
				top: 0%;
			}
		}

		.boxed {
			position: relative;
		}

		.boxed div:nth-child(2) {
			position: absolute;
			top: 0;
			background-color: white;
			z-index: -1;
			animation: animation4 2s linear;
			/*在动画结束后，动画将应用该属性值。*/
			animation-fill-mode: forwards;
		}

		@keyframes animation4 {
			from {
				z-index: 1;
				transform: scale(1);
			}

			to {
				z-index: 1;
				transform: scale(0);
			}
		}

		.diamond {
			position: relative;
			width: 200px;
			height: 100px;
		}

		.diamond .box {
			position: absolute;
			top: 0;
			left: 0;
		}

		.diamond1,
		.diamond2 {
			width: 0px;
			height: 0px;
			position: absolute;
			border-top: 50px solid transparent;
			border-bottom: 50px solid transparent;
			animation-fill-mode: forwards;
			z-index: -1;
		}

		.diamond1 {
			border-right: 101px solid white;
			border-left: 0px solid transparent;
			transform-origin: right;
			animation: anim-diamond 2s linear;
		}

		.diamond2 {
			left: 50%;
			border-right: 100px solid transparent;
			border-left: 101px solid white;
			transform-origin: left;
			animation: anim-diamond 2s linear;
		}

		@keyframes anim-diamond {
			from {
				transform: scale(1, 1);
				z-index: 1;
			}

			to {
				transform: scale(0, 0);
				z-index: 1;
			}
		}

		.wheel-container {
			width: 400px;
			height: 400px;
			background: url(img/1.png) no-repeat center;
		}

		..wheel-container>span {
			position: absolute;
		}

		.wheel-left,
		.wheel-right {
			display: inline-block;
			margin: 0px;
			padding: 0px;
			width: 50%;
			height: 100%;
			position: relative;
			background-color: rgba(170, 255, 255, 0.2);
			overflow: hidden;
			float: left;
		}

		.wheel-left-item,
		.wheel-right-item {
			width: 200%;
			height: 200%;
			position: absolute;
			bottom: -50%;
			animation-fill-mode: forwards;
		}

		.wheel-left-item {
			right: 0;
			transform-origin: right;
			animation: ani-left 6s linear;
		}

		.wheel-right-item {
			left: 0;
			transform-origin: left;
			animation: ani-right 3s linear;
		}


		@keyframes ani-left {
			from {
				background-color: white;
				transform: rotate(0deg);
			}

			50% {
				background-color: white;
				transform: rotate(0deg);
			}

			to {
				background-color: white;
				transform: rotate(180deg);
			}
		}

		@keyframes ani-right {
			from {
				background-color: white;
				transform: rotate(0deg);
			}

			to {
				background-color: white;
				transform: rotate(180deg);
			}
		}
	</style>
</html>
